<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title></title>
    <%@ include file="link-head.jsp" %>
</head>
<body>
<!--0:定义全局变量-->
<script type="text/javascript">
    var uid;
    var dfu = "0";
</script>

<div class="container" style="width:1000px;height:600px;">
    <!--页头-->
    <div class="page-header">
        <h2>云盘系统 欢迎用户:<small></small></h2>
    </div>
    <!--带表格的面板-->
    <div class="panel panel-default">
        <div class="panel-heading">天道酬勤，不忘初衷！</div>
        <!--按钮组-->
        <div class="btn-group" role="group" aria-label="..." id="toolbar">
            <!--点击创建文件夹按钮  模态框addMyDirectoryModal显示   和点击事件完全相同-->
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addMyDirectoryModal">创建文件夹
            </button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addMyFileModal">文件上传
            </button>
            <button type="button" class="btn btn-default" id="myDirectoryBackButton">后退一步</button>
            <button type="button" class="btn btn-default" id="deleteAllSelectedButton">删除选中</button>
            <button type="button" class="btn btn-default" id="userLogoutButton">退出登录</button>
        </div>
        <table class="table" id="tab_data"></table>
    </div>
</div>

<!--3 创建文件夹模态框-->
<div class="modal fade" id="addMyDirectoryModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">创建文件夹</h4>
            </div>
            <div class="modal-body">
                <form id="addMyDirectoryForm">
                    <div class="form-group">
                        <label class="control-label">文件夹名字：</label>
                        <input type="text" class="form-control" name="dname">
                    </div>
                    <div class="form-group">
                        <label class="control-label">文件夹类型：</label>
                        <label class="radio-inline">
                            <input type="radio" name="dprivate" value="1" checked>共享
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="dprivate" value="0"> 私有
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="addMyDirectorySubmitButton">添加</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#addMyDirectorySubmitButton").bind("click", function () {
            //拿表单的数据请求action  进行文件夹添加
            var jsonObj = $("#addMyDirectoryForm").serializeJSON();//获取表单数据对应的json
            jsonObj.uid = uid;
            jsonObj.dfu = dfu;
            var jsonStr = JSON.stringify(jsonObj);//获取jsong对象对应的字符串
            $.ajax({
                url: "${pageContext.request.contextPath}/myDirectory/addOne.action",
                type: "POST",
                data: jsonStr,
                cache: false,
                async: false,
                dataType: "json",
                contentType: "application/json;charset=utf-8",/*请求参数是json：必须加请求头contentType 指定请求参数的类型*/
                success: function (responseVo) {
                    alert(responseVo.message);
                    if (responseVo.status == 200) {
                        //当前模态框隐藏
                        $("#addMyDirectoryModal").modal("hide");
                        //刷新表格的数据
                        $("#tab_data").bootstrapTable("refresh"); //刷新表格
                    } else if (responseVo.status == 4001) {
                        $("#addMyDirectoryModal").modal("hide");//当前模态框隐藏
                        $("#userLoginModal").modal("show");//登录模态框显示
                    }
                }
            });
        });
    });
</script>


<!--1：给表格填充数据-->
<script type="text/javascript">
    function setTableData() {
        $("#tab_data").bootstrapTable({
            toolbar: "#toolbar",//添加按钮组
            url: "${pageContext.request.contextPath}/myDirectory/getAllByDfu.action",
            type: "GET",
            cache: false,
            queryParams: {"uid": uid, "dfu": dfu},
            dateType: "json",
            //对相应数据进行解析
            //分页步骤3：修改responseHandler 相应结果需要指定rows(当前用要显示的行记录)和total(总记录数)
            responseHandler: function (responseVo) {
                if (responseVo.status == 200) {
                    //方法的参数responseVo是 相应对象responseVo
                    return responseVo.data;
                } else if (responseVo.status == 4001) {
                    $("#addMyDirectoryModal").modal("hide");//当前模态框隐藏
                    $("#userLoginModal").modal("show");//登录模态框显示
                }
                return null;
            },
            //设置列名和列值：field指定responseVo.data的元素的属性 title指定列名
            columns: [
                {checkbox: true},/*删除的多选框*/
                {
                    field: "dname", title: "文件名字", formatter: function (value, row, index) {
                        if (row.dtype == 1) {//文件：点击下载
                            var downloadUrl = ${pageContext.request.contextPath} +"myFile/download.action?fid=" + row.dfid;
                            return '<a  class="btn btn-default" href="' + downloadUrl + '"><span class="glyphicon glyphicon-save" aria-hidden="true"></span>&emsp;' + row.dname + '</a>';
                        }
                        //文件夹：点击打开
                        return '<button type="button" class="btn btn-default" onclick="changeDfu(' + row.did + ');"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>&emsp;' + row.dname + '</button>';
                    }
                },
                {
                    field: "dtime", title: "创建时间", formatter: function (value, row, index) {
                        var myDate = new Date(row.dtime);
                        return myDate.getFullYear() + "年" + (myDate.getMonth() + 1) + "月" + myDate.getDate() + "号";
                    }
                },
                {field: "dsize", title: "文件大小(kb)"},
                {
                    field: "dprivate", title: "文件类型", editable: {
                        title: "请选择类型：",
                        type: "select",
                        source: [{value: "1", text: "共享"}, {value: "0", text: "私有"}]
                    }
                }
            ],
            //实现表格编辑 数据提交 添加属性 onEditableSave
            onEditableSave: function (field, row, oldValue) {
                //alert(field+":"+row+":"+oldValue);//field是字段名：sname row是更改后的行数据
                //把行数据转换为json串
                var rowJsonStr = JSON.stringify(row);
                //发送ajax请求
                $.ajax({
                    type: "put",
                    data: rowJsonStr,
                    cache: false,
                    async: false,
                    contentType: "application/json;charset=utf-8",/*请求参数是json：必须加请求头contentType 指定请求参数的类型*/
                    url: "${pageContext.request.contextPath}/myDirectory/updateOne.action",
                    success: function (responseVo) {
                        alert(responseVo.message);
                        if (responseVo.status == 200) {
                            $("#tab_data").bootstrapTable("refresh"); //刷新表格
                        }
                    }
                });
            }
        });
    }

    /*$(function () {
        //文档加载成功！ 数据加载一次
        setTableData();
    });*/
</script>


<script type="text/javascript">
    //进入文件夹
    function changeDfu(did) {
        dfu = dfu + "-" + did;
        $('#tab_data').bootstrapTable('destroy');//清空表格的数据
        //刷新表格的数据
        setTableData();
    }

    //疑问：//$("#tab_data").bootstrapTable("refresh",{url:path+"/myDirectory/getAllByDfu.action?uid="+uid+"&dfu="+dfu}); //刷新表格
</script>


<script type="text/javascript">
    //后退一步
    $(function () {
        $("#myDirectoryBackButton").bind("click", function () {
            if (dfu != "0") {
                dfu = dfu.substring(0, dfu.lastIndexOf("-"));
                $('#tab_data').bootstrapTable('destroy');//清空表格的数据
                //刷新表格的数据
                setTableData();
            }
        });
    })
</script>

<!--3 文件上传的模态框-->
<div class="modal fade" id="addMyFileModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">文件上传</h4>
            </div>
            <div class="modal-body">
                <form id="addMyFileForm">
                    <div class="form-group">
                        <label class="control-label">文件名字：</label>
                        <input type="text" class="form-control" name="dname">
                    </div>
                    <div class="form-group">
                        <label class="control-label">文件类型：</label>
                        <label class="radio-inline">
                            <input type="radio" name="dprivate" value="1" checked>共享
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="dprivate" value="0"> 私有
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="control-label">文件上传：</label>
                        <input type="file" class="form-control" name="dfile">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="addMyFileSubmitButton">上传</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //文件上传
    $(function () {
        $("#addMyFileSubmitButton").bind("click", function () {
            //获取表单对应formdata对象
            var dataForm = new FormData($("#addMyFileForm")[0]);
            dataForm.append("uid", uid);
            dataForm.append("dfu", dfu);
            //ajax请求
            $.ajax({
                type: "POST",
                data: dataForm,
                url: "${pageContext.request.contextPath}/myFile/upload.action",
                dataType: "json",
                async: false,
                contentType: false,//如果请求参数是FormData 必须设置 contentType请求头为false
                processData: false,//如果请求参数是FormData 必须设置 processData请求头为false
                success: function (responseVo) {
                    alert(responseVo.message);
                    if (responseVo.status == 200) {
                        //添加模态框隐藏
                        $("#addMyFileModal").modal("hide");
                        //刷新表格信息
                        $("#tab_data").bootstrapTable("refresh"); //刷新表格
                    } else if (responseVo.status == 4001) {
                        $("#addMyFileModal").modal("hide");//当前模态框隐藏
                        $("#userLoginModal").modal("show");//登录模态框显示
                    }
                }
            });
        });
    });
</script>


<script type="text/javascript">
    //删除选中
    $(function () {
        $("#deleteAllSelectedButton").bind("click", function () {
            //获取那些行的checkbox被选中
            var coll = $("#tab_data").bootstrapTable("getSelections");

            if (coll.length >= 1 && uid == undefined) {
                return;
            }

            var dids = "";
            for (var i = 0; i < coll.length; i++) {
                dids += coll[i].did + "-";
            }

            var b = confirm("确定要删除吗？");
            if (!b) {
                return;
            }
            //发送ajax请求
            $.ajax({
                type: "DELETE",
                data: null,
                url: "${pageContext.request.contextPath}/myDirectory/deleteSome/" + dids + ".action",
                dataType: "json",
                async: false,
                cache: false,
                success: function (responseVo) {
                    alert(responseVo.message);
                    if (responseVo.status == 200) {
                        //刷新表格信息
                        $("#tab_data").bootstrapTable("refresh"); //刷新表格
                    } else if (responseVo.status == 4001) {
                        $("#addMyFileModal").modal("hide");//当前模态框隐藏
                        $("#userLoginModal").modal("show");//登录模态框显示
                    }
                }
            });
        });
    });
</script>

<!--登录模态框：类似于弹出框-->
<div class="modal fade" id="userLoginModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">用户登录</h4>
            </div>
            <div class="modal-body">
                <form id="userLoginForm">
                    <div class="form-group">
                        <label class="control-label">用户名字：</label>
                        <input type="text" class="form-control" name="uname">
                    </div>
                    <div class="form-group">
                        <label class="control-label">用户密码：</label>
                        <input type="text" class="form-control" name="upwd">
                    </div>
                    <div class="form-group">
                        <label class="control-label">验&nbsp;证&nbsp;码：</label>
                        <img src="<c:url value='/user/yzmImg.action'/>" id="img_yzm"/>
                        <input type="text" class="form-control" name="uyzm">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
                <button type="button" class="btn btn-primary" id="loginSubmitButton">登录</button>
            </div>
        </div>
    </div>
</div>
<%--登录--%>
<script>
    $(function () {
        //弹出登录模态框
        $("#userLoginModal").modal("show");
        //文档加载成功！ 数据加载一次
        //setTableData();
    });
</script>
<script>
    $(function () {
        //登录
        $("#loginSubmitButton").bind("click", function () {
            var uname = $("#userLoginForm input[name='uname']").val();
            var upwd = $("#userLoginForm input[name='upwd']").val();
            var uyzm = $("#userLoginForm input[name='uyzm']").val();
            var loginUrlParam = "uname=" + uname + "&upwd=" + upwd + "&uyzm=" + uyzm;
            $.get("${pageContext.request.contextPath}/user/login.action", loginUrlParam, function (rv) {
                alert(rv.message);
                if (rv.status == 200) {
                    uid = rv.data.uid;
                    $("#unameSpan").html(rv.data.uname.fontcolor("blue"));
                    $("#userLoginModal").modal("hide");
                    //数据加载
                    setTableData();
                    $("small").text("${sessionScope.user.urealName}")

                }
            }, "json");
        });
        //更改验证码
        $("#img_yzm").bind("click", function () {
            $("#img_yzm").attr("src", "<c:url value='/user/yzmImg.action'/>?n=" + Math.random());
        });
    });

    //退出登录
    $(function () {
        $("#userLogoutButton").bind("click", function () {
            $.get("${pageContext.request.contextPath}/user/logout.action", null, function (rv) {
                alert(rv.message);
                if (rv.status == 200) {
                    $("#tab_data").bootstrapTable("destroy"); //表格数据销毁
                    uid = "";
                    $("#unameSpan").html("");
                    $("#userLoginModal").modal("show");//登录模态框显示
                } else if (responseVo.status == 4001) {
                    $("#userLoginModal").modal("show");//登录模态框显示
                }
            }, "json");
        });
    });
</script>
</body>
</html>
